<!--

  一个上下结构的功能入口

  // 带*号表示必填属性
  props:
    iconWidth:(String || Number)        图标的大小
    *data:(Object)                      展示的数据
        {
          *title:(String)               标题
          subTitle:(String)             小标题
          *image:(String)               图标链接
          href:(String)                 跳转链接
        }

  slot:

  demo:
    <qm-entry
      v-for="(item, index) in entry"
      :key="index"
      :data="item"
      iconWidth="96"
    ></qm-entry>

    data(){
      return {
        entry: [
          {
            image: "static/img/home/home-4/entry-1.png",
            title: "随机巡查",
            href: "/business/index",
          },
          ...
        ]
      }
    }

-->



<template>
  <div class="entry">
    <f7-link :href="data.href || '#'" class="link">
      <div class="entry-img" :style="`--width: calc(${iconWidth}px * var(--ratio))`">
        <img :src="data.image" alt="" />
      </div>
      <p class="entry-title" :style="`font-size: calc(${fontSize}px * var(--ratio);`">{{ data.title }}</p>
      <p class="entry-subtitle" v-if="data.subtitle">{{ data.subtitle }}</p>
    </f7-link>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
    },
    iconWidth: {
      type: String | Number,
      default: "86"
    },
    fontSize: {
      type: String | Number,
      default: "28"
    }
  },
};
</script>

<style lang="less" scoped>
.entry {
  // width: 100%;

  .link {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .entry-img {
      width: var(--width);
      height: var(--width);

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .entry-title {
    --height: calc(40px * var(--ratio));
    height: var(--height);
    line-height: var(--height);
    width: 100%;
    font-size: var(--font-size-subcontent);
    color: var(--color-text-title);
    text-align: center;
    margin: 0;
    margin-top: calc(15px * var(--ratio));

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .entry-subtitle {
    --height: calc(33px * var(--ratio));
    // width: 100%;
    font-size: var(--font-size-subcontent-2);

    height: var(--height);
    line-height: var(--height);
    color: var(--color-text-subtext);
    text-align: center;
    margin: 0;
    margin-top: calc(2px * var(--ratio));

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
